import React, { Fragment, useState, useEffect, useRef } from 'react';
import ReactEcharts from 'echarts-for-react';
import {useSelector,useDispatch} from 'react-redux';   // 代替connect
import echarts from 'echarts/lib/echarts';
import { depthData } from '../../../config/depthData';
import {dragCurveData,getVideoClickYdata} from '../../../redux/actions';

export const DaoEchartsShow = ({ curve }) => {   // 接收传入的属性

// 准备数据
  const depthDataa = useSelector(state => state.depthDataa);
  const docData = useSelector(state => state.docData);
  const markLineData = useSelector(state => state.videoMarkline)
  const dispatch = useDispatch()   // 像state 更改 数据
  var interval,depthInterval;
  if(docData.doc_type === "纯数据文件"){
    depthInterval = docData.interval;
  }else if(docData.doc_type === "绘图文件"){
    depthInterval = docData.docData.interval;
  }
  if(depthInterval){
    interval = (5/depthInterval) - 1;
  }else{
    interval = 49;
  };

// 是否可拖拽
  const isDraggable = useSelector(state => state.isDraggable);   
  var _draggable = false;
  isDraggable.map((item) => {
    if(item.curve_id === curve.curve_id){
      _draggable = true;
    }else{
      _draggable = false;
    }
  });
  

// echarts相关数据定义

  var symbolSize = 6;
  const ref = useRef(null);
  var data = [];
  curve.xData.map((item,index) => {
    data.push([item,depthDataa[index]])
  })

  function initCharts(){
    var chartRef = ref.current;
    if(chartRef){
      setTimeout(() => {   // 延时10ms进行渲染echarts，可是解决 实时获取当前div大小的问题;
        var myChart = echarts.init(chartRef);
        myChart.resize();  // echarts大小自适应
      }, 10); 

      var myChart = echarts.init(chartRef);
      var option = {
        tooltip: {
          triggerOn: 'none',
          formatter: function (params) {
              return 'X: ' + Number(params.data[0]).toFixed(2) + '<br>Y: ' + Number(params.data[1]).toFixed(2);  //.toFixed(2)
          }
        },
        grid: {   // 直角坐标系内绘图网格
            left: '0',   // grid 组件离容器左侧的距离。
            right: '0',
            top:'0',
            bottom: '0',
            containLabel: true  //grid 区域是否包含坐标轴的刻度标签,true:防止标签溢出 
        },
        xAxis: {
            type: 'value',    // value: 数值轴，连续数据  => 最终只规定 起始值 和 终值     
            min: curve.left_data,   // 接收左值
            max: curve.right_data,   // 接收右值
            interval: 100000,
            splitNubmer: 10, // 最大值和最小值平分为10个点
            axisLabel: {  // 刻度标签
              show: false, 
            },
            axisLine: {  // 轴线
              show: false,
              onZero: false,
            },
            axisTick: {  // 刻度线
              show: false
            },
            splitLine:{
              show:false,
            },
            boundaryGap: false,
        },
        yAxis: {
            type: 'value',  // category：类目轴，离散的类目数据
            inverse : true,  // 倒序
            max: depthDataa[depthDataa.length - 1],
            min: depthDataa[0],
            axisLine: {
              show: false,
              onZero: false
            },  
            axisLabel: {
              show: false,
              //interval: interval   // 标签的显示间隔，只在类目轴有效，但曲线展示区域不需要显示标签，因此不影响   
            },
            axisTick: {  // 刻度线
              show: false
            },
            splitLine:{
              show:false,
              lineStyle: {
                color:'rgba(0,168,246,0.4)'
              }
            },
            boundaryGap: false,
            //data: depthDataa   // y轴深度：起始值 和 终止值 有用户定义；可设置默认值
        },
        series: [
          {
            id: curve.curve_id,
            type: 'line',
            smooth: true,
            showSymbol: _draggable,
            symbolSize: symbolSize,  // 圆点的大小
            lineStyle: {
              type : curve.line_type,    //用户可以设置，点，虚线，实线
              width: curve.width,   // 曲线宽度，用户可设置
              color: curve.color   // 曲线颜色，用户可设置
            },
            data: data,  // 用户可设置区间 curve.xData 
            markLine : {    // 标记线(视频同步用)
							symbol:"none",               //去掉警戒线最后面的箭头
							label:{
								position:"start"          //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
							},
              data : [{
								silent: true,             //鼠标悬停事件  true没有，false有
								lineStyle:{               //警戒线的样式  ，虚实  颜色
                  type:"solid",
									color:"#FA3934",
                  width: 2,
                  opacity: markLineData===0?0:1  // 透明度：0不显示，1显示
								},
								yAxis: markLineData          // 警戒线的标注值，可以有多个yAxis,多条警示线 
							}]
            }

          }
        ]
      };
      // console.log(option);
      myChart.setOption(option);

      setTimeout(function () {
        // 使用 graphic 组件，在每个点上面，覆盖一个隐藏的可拖拽的圆点
        myChart.setOption({
            graphic: echarts.util.map(data, function (item, dataIndex) {   // 用 map 方法遍历 data 的每项，为每项生成一个圆点
              return {
                type: 'circle',  //首次设定图形元素时必须指定,设置形状：圆形
                // 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。
                // 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置。
                // convertToPixel(): 直角坐标 转 像素坐标；  convertFromPixel(): 像素坐标 转 直角坐标
                position: myChart.convertToPixel('grid', item),
                shape: {
                    cx: 0,
                    cy: 0,
                    r: symbolSize / 2
                },
                invisible: true,   // 节点是否可见：可见 
                draggable: _draggable,  // 是否可拖拽
                // 使用echarts.util.curry 这个帮助方法:生成一个与 onPointDragging功能一样的新函数，且第一个参数永远为此时传入的 dataIndex 的值
                ondrag: _draggable? echarts.util.curry(onPointDragging, dataIndex) : false,   // 此圆点的拖拽的响应事件，在拖拽过程中会不断被触发。
                onmousemove: _draggable? echarts.util.curry(showTooltip, dataIndex) : false,
                onmouseout: _draggable?echarts.util.curry(hideTooltip, dataIndex): false,
                z: 100   // 把 z 值设得比较大，表示这个圆点在最上方，能覆盖住已有的折线图的圆点
              }  
            })
        })
      }, 0)
  
  
      window.addEventListener('resize', updatePosition);
  
      function updatePosition() {  // 对每个拖拽圆点重新计算位置，并用 setOption 更新。
        myChart.setOption({
            graphic: echarts.util.map(data, function (item, dataIndex) { 
                return {
                    position: myChart.convertToPixel('grid', item)
                };
            })
        });
      }
  
      function showTooltip(dataIndex) {
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: dataIndex
        });
      }
  
      function hideTooltip(dataIndex) {
        myChart.dispatchAction({
            type: 'hideTip'
        });
      }
  
  
      // 拖拽某个圆点的过程中会不断调用此函数。
      // 此函数中会根据拖拽后的新位置，改变 data 中的值，并用新的 data 值，重绘折线图，从而使折线图同步于被拖拽的隐藏圆点。
      function onPointDragging(dataIndex, dx, dy) {
        // data ：最初代码块中声明的 data，在这里会被更新；this：被拖拽的圆点。this.position 就是圆点当前的位置
        data[dataIndex] = myChart.convertFromPixel('grid', this.position);  
  
        // 用更新后的 data，重绘折线图。
        myChart.setOption({
            series: [{
                //id: 'a',
                data: data  
            }]
        });

        // 修改 redux中的数据，只修改 曲线的xdata
        const curve_id = curve.curve_id;
        var xdata = []; 
        data.map((item)=>{
          xdata.push(Number(item[0]).toFixed(2));
          //ydata.push(typeof(item[1])=='string' ? item[1] : item[1].toString());
        })
        dispatch(dragCurveData({curve_id,xdata}));
      };


      // myChart.getZr().on('click', function(params) {   // 获取 点击点坐标
      //   const { target, topTarget } = params   // 在折线拐点上才有target，在折线上是topTarget
      //   // if (topTarget?.z === 2) {  // 判断点击的点在  点击在折线的拐点（拐点获取不到？？？？？？） || 折线上 ；； target?.z === 2 ||：感觉其实没必要判断是否在拐点，只要在折线上就行
      //     var xIndex=myChart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];  // 获取x轴数据
      //     var yIndex=myChart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[1];  // 获取y轴数据
      //     console.log("点击点坐标",xIndex,yIndex);
      //     dispatch(getVideoClickYdata(yIndex)); 
      //   // }
      // })
      
      myChart.getZr().on('mousemove', function(params) {   // 将可以响应点击事件的范围内，鼠标样式设为pointer
        const { topTarget } = params
        // 给折线的鼠标悬浮 变为 小手
        if (topTarget?.z === 2) {
          myChart.getZr().setCursorStyle('pointer')
        }
      })
      
    }
  }

  useEffect(() => {
    initCharts();
  })

  return (
    <Fragment>
      <div
        className="curve-echarts-show"
        ref={ref}    // 通过ref获取dom
        style={{height:'100%',width:'100%'}}
      />
    </Fragment>  
  )
};




































































// import React, { Fragment } from 'react';
// import ReactEcharts from 'echarts-for-react';
// import {useSelector} from 'react-redux';

// export const DaoEchartsShow = ({ curve }) => {   // 接收传入的属性

//   // 准备数据
//     const depthDataa = useSelector(state => state.depthDataa);
//     const docData = useSelector(state => state.docData);
//     var interval,depthInterval;
//     if(docData.doc_type === "纯数据文件"){
//       depthInterval = docData.interval;
//     }else if(docData.doc_type === "绘图文件"){
//       depthInterval = docData.docData.interval;
//     }
//     if(depthInterval){
//       interval = (5/depthInterval) - 1;
//     }else{
//       interval = 49;
//     };
  
//   // 是否可拖拽
//   const isDraggable = useSelector(state => state.isDraggable);   
//   var _draggable = false;
//   for(let item of isDraggable){
//     if(item.curve_id === curve.curve_id){
//       _draggable = true;
//       break;  // 跳出循环，不再进行遍历比较，但map语法无法跳出，因此使用for..of
//     }else{
//       _draggable = false;
//     }
//   }
//   //console.log("可拖拽曲线",isDraggable,_draggable);
    
  
//   // echarts相关数据定义
  
//     var symbolSize = 6;
    
//     var option = {
//       grid: {   // 直角坐标系内绘图网格
//           left: '0',   // grid 组件离容器左侧的距离。
//           right: '0',
//           top:'0',
//           bottom: '0',
//           containLabel: true  //grid 区域是否包含坐标轴的刻度标签,true:防止标签溢出 
//       },
//       xAxis: {
//           type: 'value',    // value: 数值轴，连续数据  => 最终只规定 起始值 和 终值     
//           min: curve.left_data,   // 接收左值
//           max: curve.right_data,   // 接收右值
//           interval: 100000,
//           splitNubmer: 10, // 最大值和最小值平分为10个点
//           axisLabel: {  // 刻度标签
//             show: false, 
//           },
//           axisLine: {  // 轴线
//             show: false,
//             onZero: false,
//           },
//           axisTick: {  // 刻度线
//             show: false
//           },
//           boundaryGap: false,
//       },
//       yAxis: {
//           type: 'category',  // category：类目轴，离散的类目数据
//           inverse : true,  // 倒序
//           axisLine: {
//             show: false,
//             onZero: false
//           },  
//           axisLabel: {
//             //show: false,
//             interval: interval    
//           },
//           axisTick: {  // 刻度线
//             show: false
//           },
//           boundaryGap: false,
//           data: depthDataa   // y轴深度：起始值 和 终止值 有用户定义；可设置默认值
//       },
//       series: [
//           {
//             id: curve.curve_id,
//             type: 'line',
//             smooth: false,
//             showSymbol: _draggable,
//             symbolSize: symbolSize,  // 圆点的大小
//             lineStyle: {
//               width: curve.width,   // 曲线宽度，用户可设置
//               color: curve.color   // 曲线颜色，用户可设置
//             },
//             data: curve.xData  // 用户可设置区间         
//           }
//       ]
//     };
  
//     return (
//       <Fragment>
//         <ReactEcharts
//           option={option}
//           style={{height:'100%',width:'100%'}}
//         />
//       </Fragment>  
//     )
//   };